<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
</head>
<body>
<form id="myForm" method="post" class="definewidth m20" >
<table class="table table-bordered table-hover definewidth m10">
    <input type="hidden" name="r_id" id="r_id"/>
    <tr>
        <td width="10%" class="tableleft">角色名称</td>
        <td><input type="text" name="r_name" id="r_name"/><input type="hidden" id="initName" name="initName"/><span id="name_res" style="color: red;margin-left: 10px"></span></td>
    </tr>
    <tr>
        <td class="tableleft">状态</td>
        <td>
            <input type="radio" name="r_state" value="0"/> 启用
           <input type="radio" name="r_state" value="1"/> 禁用
        </td>
    </tr>
    <tr>
        <td class="tableleft">权限</td>
        <td id="menuList">
		</td>
    </tr>
    <tr>
        <td class="tableleft"></td>
        <td>
            <button id="update" class="btn btn-primary" type="button">更新</button> &nbsp;&nbsp;<button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
        </td>
    </tr>
</table>
</form>
</body>
</html>
<script>
    String.prototype.GetValue= function(para) {
        let reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?")+1).match(reg);
        if (r!=null) return unescape(r[2]); return null;
    }
    // 渲染查询的数据
    function loadUpdateData() {
        // 获取url 的 id
        let id = location.href.toString().GetValue("id");
        console.log(id);
        $.getJSON("/role/"+id,null,function (data) {
            if (data.code==200){
                // 服务器响应成功
                if (data.msg=="success"){
                    let role = data.data;
                    console.log(role)
                    $("#r_name").val(role.r_name);
                    $("#initName").val(role.r_name);
                    $("#r_id").val(role.r_id);
                    // 渲染单选框
                    let radio = $("input[name='r_state']");
                    for (let i = 0; i < radio.length; i++) {
                        if ($(radio[i]).val()==role.r_state) {
                            $(radio[i]).prop("checked",true);
                        }
                    }
                    // 渲染该角色的
                    let checkbox = $("input[name='menu']");
                    // 遍历menuList
                    for (let i = 0; i < role.menuList.length; i++) {
                        let menu = role.menuList[i];
                        for (let j = 0; j < checkbox.length; j++) {
                            if ($(checkbox[j]).val()== menu.m_id) {
                                $(checkbox[j]).prop("checked",true);
                                break;
                            }
                        }
                    }
                } else {
                    alert("网络问题，请稍后重试");
                    location.href = "index.html";
                }
            } else{
                alert("网络问题，请稍后重试");
                location.href = "index.html";
            }
        })
    }
    // 判断角色名是否重复
    function isExistOfName(){
        let val = $("#r_name").val();
        if (val=='') {
            alert("请填写角色名称");
        } else {
            $.getJSON("/role/isExistName/" +val ,null,function (data) {
                if (data.result=="success" && data.data.r_name != $("#initName").val() ){
                    $("#name_res").html(data.msg);
                } else{
                    $("#name_res").html("");
                }
            })
        }
    }
    $(function () {
        // 先渲染所有的menu资源
        $.getJSON("/menu/getAll",null,function (data) {
            if (data.msg=='success'){
                $("#menuList").empty();
                // 渲染数据
                let list = data.data;
                console.log(data.data)
                for (let i = 0; i < list.length; i++) {
                    let items = `<ul><label class='checkbox inline'><input type='checkbox' name='menu' value='`+list[i].m_id+`' />`+list[i].m_name+`</label></ul>`
                    $("#menuList").append($(items))
                }
            }
        })
        // 根据id 查找数据,渲染数据
        loadUpdateData()
        // r_name 的blur事件
        $("#r_name").blur(function () {
            isExistOfName()
        })
        // 更新
        $("#update").click(function () {
            // 先验证
            let val = $("#r_name").val();
            if (val=='') {
                alert("请填写角色名称后，再添加");
            } else {
                $.getJSON("/role/isExistName/" +val ,null,function (data) {
                    if (data.result=="success" &&  data.data.r_name != $("#initName").val() ){
                        // 资源名相同
                        $("#name_res").html(data.msg);
                    } else{
                        // 资源名验证通过
                        // 发送ajax请求添加
                        // 获取pageIndex，pageSize
                        let params = $("#myForm").serialize();
                        console.log(params);
                        $.ajax({
                            type:"post",
                            url: "/role",
                            data: $("#myForm").serialize()+"&_method=PUT",
                            dataType:"json",
                            success: function(data){
                                if(data.msg=='success') {
                                    let pageIndex = location.href.GetValue("pageIndex");
                                    let pageSize = location.href.GetValue("pageSize");
                                    window.location.href = "index.html?pageIndex="+pageIndex+"&pageSize="+pageSize;
                                }else{
                                    alert("更新失败！"+data.result);
                                }
                            }
                        })
                    }
                })
            }
        })

        $('#backid').click(function(){
				window.location.href="index.html";
		 });
    });


</script>